import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Index';
import Video from './page/Video';
import Workplace from './page/Workplace';

import './Index.css'

function AppRouter() {
  let routeConfig =[
    {path:'/',title:'首页',exact:true,component:Index},
    {path:'/video/',title:'教程',exact:false,component:Video},
    {path:'/workplace/',title:'技能',exact:false,component:Workplace}
  ]
  return (
    <Router>
        <div className="mainDiv">
          <div className="leftNav">
            <h3>一级导航</h3>
            <ul>
              {/* <li><Link to="/">首页</Link></li>
              <li><Link to="/video/">教程</Link></li>
              <li><Link to="/workplace/">技能</Link></li> */}
              {
                routeConfig.map((item, index)=>{
                  return <li key={index}><Link to={item.path}>{item.title}</Link></li>
                })
              }
            </ul>
          </div>
          <div className="rightMain">
            {/* <Route path="/" exact component={Index}></Route>
            <Route path="/video/" component={Video}></Route>
            <Route path="/workplace/" component={Workplace} /> */}
            {
              routeConfig.map((item, index)=>{
                return <Route key={index} exact={item.exact} path={item.path} component={item.component}></Route>
              })
            }
          </div>
        </div>
    </Router>
  );
}
export default AppRouter;